<template>
  <div class="container">
    <Breadcrumb :items="['menu.form', 'menu.form.datainit']" />
    <a-spin :loading="loading" style="width: 100%">
      <a-card class="general-card">
        <template #title>
          {{ $t('stepForm.step.title') }}
        </template>
        <template>
          <a-space direction="vertical" :style="{ width: '100%' }">
            <a-upload action="/" />
            <a-upload action="/" disabled style="margin-top: 40px" />
          </a-space>
        </template>

        <div class="wrapper">
          <a-steps
            v-model:current="step"
            style="width: 1000px"
            line-less
            class="steps"
          >
            <a-step :description="$t('stepForm.step.subTitle.baseInfo')">
              {{ $t('stepForm.step.title.baseInfo') }}
            </a-step>
            <a-step :description="$t('step.employee')">
              {{ $t('step.employee') }}
            </a-step>
            <a-step :description="$t('step.timesheet')">
              {{ $t('step.timesheet') }}
            </a-step>
            <a-step :description="$t('step.payroll')">
              {{ $t('step.payroll') }}
            </a-step>
            <a-step :description="$t('step.end')">
              {{ $t('stepForm.step.title.finish') }}
            </a-step>
          </a-steps>
          <keep-alive>
            <BaseInfo
              v-if="step === 1"
              @changeStep="changeStep"
              @uploadData="handleUploadData"
              @uploadData1="handleUploadData1"
              @uploadData2="handleUploadData2"
            />
            <ChannelInfo
              v-else-if="step === 2"
              :modelData1="fileId"
              @change-step="changeStep"
            />
            <ChannelInfo2
              v-else-if="step === 3"
              :modelData1="fileId1"
              @change-step="changeStep"
            />
            <ChannelInfo3
              v-else-if="step === 4"
              :modelData1="fileId2"
              @change-step="changeStep"
            />
            <Success
              v-else-if="step === 5"
              :descriptionText="descriptionText"
              @change-step="changeStep"
            />
          </keep-alive>
        </div>
      </a-card>
    </a-spin>
  </div>
</template>

<script lang="ts" setup>
  import axios from 'axios';
  import { ref } from 'vue';
  import useLoading from '@/hooks/loading';
  import {
    BaseInfoModel,
    ChannelInfoModel,
    UnitChannelModel,
  } from '@/api/form';
  import BaseInfo from './components/base-info.vue';
  import ChannelInfo from './components/channel-info.vue';
  import ChannelInfo2 from './components/channel-info2.vue';
  import ChannelInfo3 from './components/channel-info3.vue';
  import Success from './components/success.vue';

  const { loading, setLoading } = useLoading(false);
  const step = ref(1);
  const fileId = ref(77);
  const fileId1 = ref(77);
  const fileId2 = ref(77);
  const descriptionText = ref('');

  const submitModel = ref<UnitChannelModel>({} as UnitChannelModel);

  // const submitModeldata = "test";

  // const submitForm = async () => {
  //   setLoading(true);
  //   try {
  //     await submitChannelForm(submitModel.value); // The mock api default success
  //     step.value = 5;
  //     submitModel.value = {} as UnitChannelModel; // init
  //   } catch (err) {
  //     // you can report use errorHandler or other
  //   } finally {
  //     setLoading(false);
  //   }
  // };

  const changeStep = (direction: string | number, model) => {
    if (typeof direction === 'number') {
      step.value = direction;
      return;
    }
    Object.assign(fileId, model.file_id);
    // fileId.value = model.file_id
    // console.log(fileId)
    if (direction === 'forward' || direction === 'submit') {
      console.log('forward');

      if (direction === 'submit') {
        console.log('submit!!!!!');
        console.log(fileId);
        console.log(fileId1);
        console.log(fileId2);

        const fileIds = [fileId.value, fileId1.value, fileId2.value];
        setLoading(true);
        const promises = fileIds.map((id) => {
          return axios
            .post('http://101.35.43.81:8111/api/start-process', { file_id: id })
            .then((response) => {
              console.log('Process started for file ID:', id);

              descriptionText.value += `Process started for file ID: ${id}: `; // 添加消息并换行
            })
            .catch((error) => {
              console.error('Error starting process for file ID:', id, error);
              descriptionText.value += `Error for file ID: ${id}:`; // 处理错误并换行
            });
        });

        // 使用 Promise.all 等待所有的 Promise 完成
        Promise.all(promises).then(() => {
          setLoading(false);
          step.value = 5;
        });
      } else {
        step.value += 1;
      }
    } else if (direction === 'backward') {
      step.value -= 1;
    }
  };

  const handleUploadData = (data) => {
    console.log('file_id1', data.data.file_id);
    fileId.value = data.data.file_id;

    // Object.assign(submitModel.value, data); // 合并上传数据到模型
  };

  const handleUploadData1 = (data) => {
    console.log('file_id2', data.data.file_id);
    fileId1.value = data.data.file_id;

    // Object.assign(submitModel.value, data); // 合并上传数据到模型
  };

  const handleUploadData2 = (data) => {
    console.log('file_id3', data.data.file_id);
    fileId2.value = data.data.file_id;

    // Object.assign(submitModel.value, data); // 合并上传数据到模型
  };
</script>

<script lang="ts">
  export default {
    name: 'Step',
  };
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 20px 20px;
  }
  .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 0;
    background-color: var(--color-bg-2);
    :deep(.arco-form) {
      .arco-form-item {
        &:last-child {
          margin-top: 20px;
        }
      }
    }
  }

  .steps {
    margin-bottom: 76px;
  }
</style>
